<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    div {
      padding: 10px;
    }
    .parent {
      border: 2px solid blue;
    }
    .child {
      border: 2px solid green;
    }
    .button {
      background: gold;
    }
    .ipt {
      padding: 5px 10px;
      width: 200px;
      height: 20px;
    }
    .div-touch {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      /* touch-action: none; */
    }

    .div-scroll {
      width: 200px;
      height: 200px;
      background-color: lightgreen;
      overflow: auto;
    }
  </style>
  <title>Document</title>
</head>
<!-- <body onclick="console.log('click body')"> -->
<body>
  <div class="parent">
    div-parent
    <div class="child">
      div-child
      <br>
      <input type="text" vlaue='' class="ipt" ></input><br>
      <button class="button">点击</button>
    </div>
  </div>
  <div class="div-touch">
    div-touch
  </div>
  <div class="div-scroll">
    div-scroll
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br>
  <script src="js-event.js"></script>
  <script>
    console.log('在js-event.js获取并执行后')
  </script>
  <script>
  let EventUtil = {
    addHandler: function(element, type, handler) {
      if(element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
        element.attachEvent("on"+type, handler);
      } else {
        element["on" + type] = handler;
      }
    },
    removeHandler: function(element, type, handler) {
      if(element.removeEventListener) {
        element.removeEventListener(type, handler, false);
      } else if (element.detachEvent) {
        element.detachEvent("on"+type, handler);
      } else {
        element["on" + type] = null;
      }
    }
  }

  let divParent = document.querySelector('.parent')
  let child = document.querySelector('.child')
  let btn = document.querySelector('.button')

  // EventUtil.addHandler(divParent, 'click', (e) => {
  //   alert('事件回调来自 parent')
  // })

  // EventUtil.addHandler(child, 'click', (e) => {
  //   alert('事件回调来自 child')
  // })

  // EventUtil.addHandler(btn, 'click', (e) => {
  //   // e.stopPropagation();
  //   alert('事件回调来自 button')
  // })


  // 演示各种常用事件
    const parentDom = document.querySelector('.parent')
    // // 鼠标事件
    // EventUtil.addHandler(parentDom, 'click', (e)=> {
    //   console.log('parent node click')
    // })
    // EventUtil.addHandler(parentDom, 'mouseenter', (e) => {
    //   console.log('parent node mouseenter')
    // })
    // EventUtil.addHandler(parentDom, 'mouseleave', (e) => {
    //   console.log('parent node mouseleave')
    // })
    // EventUtil.addHandler(parentDom, 'mousemove', (e) => {
    //   console.log('parent node mousemove')
    // })
    // EventUtil.addHandler(parentDom, 'mousedown', (e) => {
    //   console.log('parent node mousedown')
    // })
    // EventUtil.addHandler(parentDom, 'mouseup', (e) => {
    //   console.log('parent node mouseup')
    // })

    // 键盘监听事件
    const domIpt = document.querySelector('.ipt')
    // EventUtil.addHandler(domIpt, 'keydown', (e) => {
    //   console.log('parent node keydown', e.key, e.keyCode)
    // })
    // EventUtil.addHandler(domIpt, 'keyup', (e) => {
    //   console.log('parent node keyup', showKeyName(e))
    // })
    // EventUtil.addHandler(domIpt, 'keypress', (e) => {
    //   console.log('parent node keypress', e.key, e.keyCode)
    // })

    // 移动端touch事件
    const domDivTouch = document.querySelector('.div-touch')
    // EventUtil.addHandler(domDivTouch, 'touchstart', (e) => {
    //   console.log('touchstart')
    // })
    // EventUtil.addHandler(domDivTouch, 'touchmove', (e) => {
    //   console.log('touchmove')
    // })
    // EventUtil.addHandler(domDivTouch, 'touchend', (e) => {
    //   console.log('touchend')
    // })
    // EventUtil.addHandler(domDivTouch, 'touchcancel', (e) => {
    //   console.log('touchcancel')
    // })

    // scroll事件
    const divScroll = document.querySelector('.div-scroll')
    // EventUtil.addHandler(document, 'scroll', (e) => {
    //   console.log('scroll', e)
    // })

    EventUtil.addHandler(divScroll, 'scroll', (e) => {
      console.log('scroll from div-scroll', e)
    })
    

  </script>
</body>
</html>